<template>
  <div>
    <el-form
      :model="searchForm"
      :rules="rules"
      ref="searchFormRef"
      size="mini"
      :disabled="jobStatus == 300"
      :inline="true"
    >
      <div>
        <el-form-item label="税款日期起止" prop="taxPeriodStartTime">
          <el-date-picker
            v-model="searchForm.taxPeriodStartTime"
            align="right"
            type="date"
            placeholder="选择开始日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="taxPeriodEndTime">
          <el-date-picker
            v-model="searchForm.taxPeriodEndTime"
            align="right"
            type="date"
            placeholder="选择结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="getlist('searchFormRef')"
            >查询</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <div style="margin-top: 10px">
      <success
        v-if="jobStatus == 200 && tableData.length == 0 && !showFlag"
      ></success>
      <el-empty v-if="showFlag" description="暂无数据"></el-empty>
      <faile @goOut="goOut" v-if="jobStatus == 300"></faile>
      <el-card v-if="tableData.length > 0 && jobStatus == 200">
        <el-table :data="tableData" border :fit="true">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column prop="applyTableName" label="申报表名称" width="350">
          </el-table-column>
          <el-table-column prop="applyTime" label="申报日期" width="180">
          </el-table-column>
          <el-table-column
            prop="taxPeriodStart"
            label="税款所属期起"
            width="180"
          ></el-table-column>
          <el-table-column prop="taxPeriodEnd" label="税款所属期止" width="180">
          </el-table-column>
          <el-table-column
            prop="refundedTaxAmount"
            label="应补退税额"
            width="180"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="seeDetail(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageRight"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          :page-sizes="[5, 10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
    <detailDia ref="detailRef"></detailDia>
  </div>
</template>
<script>
import success from "../../../components/status/success.vue";
import faile from "../../../components/status/faile.vue";
import detailDia from "./diaDetail.vue";
import { getApplyInfoList, getAnnualEvaluationResultsDetail } from "@/api/tax";
import { timeFun } from "../../../utils/date";
export default {
  components: {
    success,
    detailDia,
    faile
  },
  props: {
    jobActive: {
      type: String,
      default: "查询任务"
    },
    jobStatus: {
      type: Number,
      default: null
    }
  },
  created() {
    this.showFlag = false;
  },
  data() {
    return {
      //日期配置项
      pickerOptions: {
        disabledDate(time) {
          // 获取三年前的今天和昨天的日期
          const threeYearsAgo = new Date();
          threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);
          threeYearsAgo.setHours(0, 0, 0, 0);

          const yesterday = new Date();
          yesterday.setDate(yesterday.getDate() - 1);
          yesterday.setHours(0, 0, 0, 0);

          // 比较日期是否在三年前的今天和昨天之外
          return (
            time.getTime() < threeYearsAgo.getTime() ||
            time.getTime() > yesterday.getTime()
          );
        },
        shortcuts: [
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 1);
              picker.$emit("pick", date);
            }
          },
          {
            text: "两年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 2);
              picker.$emit("pick", date);
            }
          },
          {
            text: "三年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 3);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      rules: {},

      activeName: "first",
      //查询表单字段项
      searchForm: {
        taxPeriodStartTime: "",
        taxPeriodEndTime: "",
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      total: 0,
      options: [],
      showFlag: false
    };
  },
  watch: {
    //监听激活项
    jobActive: {
      handler(newVal, oldVal) {
        //判断切换时激活项
        if (newVal != oldVal) {
          this.searchForm = {
            taxPeriodStartTime: "",
            taxPeriodEndTime: "",
            pageSize: 10,
            pageNum: 1
          };
          this.tableData = [];
          this.total = 0;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    goOut() {
      this.$emit("goOut", 1);
    },
    searchList() {
      //表单配置项
      let params = {
        taxPeriodStartTime: this.searchForm.taxPeriodStartTime,
        taxPeriodEndTime: this.searchForm.taxPeriodEndTime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        enterpriseId: this.jobActive
      };
      if (params.taxPeriodStartTime || params.taxPeriodEndTime) {
        if (!timeFun(params.taxPeriodStartTime, params.taxPeriodEndTime)) {
          return this.$message.error("结束时间必须大于开始时间哦");
        }
      }

      getApplyInfoList(params).then(res => {
        if (res.data.list.length == 0) {
          this.showFlag = true;
          this.tableData = [];
          return this.$message.error("抱歉，暂时没有查询到开票金额哦");
        } else {
          this.showFlag = false;
        }
        this.total = res.data.total;
        this.tableData = res.data.list;
      });
    },
    getlist(formName) {
      if (this.jobStatus == 300) {
        return this.$message.error("请您输入企业信息后重新查询哦");
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.searchForm.pageNum = 1;
          this.searchList();
        } else {
          return false;
        }
      });
    },
    //弹框详情
    seeDetail(v) {
      this.$refs.detailRef.handleOpen(v, this.jobActive);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.searchList();
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-result {
  font-size: 14px;
  color: red;
}
</style>
